<!--
速度曲线：步长
    - steps()
    - 规定时间函数中的间隔数量（步长），整个动画划分为多步走完
    - 应用：打印机一个字一个字输出
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .w {
    overflow: hidden;
    /* 字宽20px，共10个字，动画最终200px */
    font-size: 20px;
    white-space: nowrap;
    /* 起始状态的宽度为0 */
    width: 0;
    height: 30px;
    /* 一个字一步，共10步 */
    animation: widthChange 5s steps(10) forwards;
  }
  @keyframes widthChange {
    to {
      width: 200px;
    }
  }
</style>

<div class="w">一二三四五六七八九十</div>
